<template>
	<view class="content">
		<top-userinfo :userusername="userusername" ref="topuserinfo" :parentData="false"></top-userinfo>
		<view class="uni-padding-wrap" style="padding-top: 30rpx;">
			<uni-forms>
				<uni-forms-item label="姓名">
					<uni-easyinput v-model="realname" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号">
					<uni-easyinput type="number" v-model="phoneNumber" :disabled="true" placeholder="自动获取手机号" />
					<button class="mini-btn" size="mini" type="primary"  
					@click.native="inputDialogEidtToggle('center')">修改</button>
				</uni-forms-item>
				<!-- <uni-forms-item label="验证码">
					<uni-easyinput type="number" v-model="verificationCode" placeholder="请输入验证码" />
					<button class="mini-btn" size="mini" type="primary" @click="getVerificationCode" v-if="timer == 0">获取验证码</button>
					<button class="mini-btn" size="mini" type="primary" v-else>{{seconds}}</button>
				</uni-forms-item> -->				
			</uni-forms>
		</view>
		
		<button type="primary"  @click="editename" class="fixed-btn">提交修改</button>
		<!-- 编辑弹窗 -->
		<uni-popup ref="inputDialog" background-color="#fff" @change="change">
			<view class="popup-content">
				<view class="uni-center" style="margin-bottom: 60rpx;">
					修改手机号
				</view>
				<uni-forms>
					<uni-forms-item label="手机号" label-width="40">
						<uni-easyinput type="number" :clearable="false" v-model="resetphonenumber" placeholder="请输入新手机号" />
					</uni-forms-item>
					<uni-forms-item label="验证码" label-width="40">
						<uni-easyinput type="number" v-model="verificationCode" placeholder="请输入验证码" />
						<button class="mini-btn" size="mini" type="primary" @click="getVerificationCode"
						 v-if="timer == 0">获取</button>
						<button class="mini-btn" size="mini" type="primary" v-else>{{seconds}}</button>
					</uni-forms-item>
				</uni-forms>
				<view class="">
					<button type="primary" @click="editePhone">提交</button>
				</view>
				
			</view>
			
		</uni-popup>
		
		<!-- ///////////////////// 旧版内容 勿删！！///////////////////// -->
		<!-- <view class="weui-cells">
			<view class="weui-cell">
			    <view class="weui-cell__hd"><label class="weui-label">姓名</label></view>
			    <view class="weui-cell__bd">
					<input class="" type="text" placeholder="请输入姓名" v-model="realname" />
				</view>
			</view>
			<view class="weui-cell">
			    <view class="weui-cell__hd"><label class="weui-label">手机号</label></view>
			    <view class="weui-cell__bd">
					<input class="" type="number" placeholder="请输入手机号" v-model="phoneNumber" />
				</view>
			</view>
			<view class="weui-cell weui-cell_active weui-cell_vcode weui-cell_wrap">
			    <view class="weui-cell__hd"><label class="weui-label">验证码</label></view>
			    <view class="weui-cell__bd weui-flex">
					<input class="" type="number" placeholder="请输入验证码" v-model="verificationCode" />
					<button class="weui-btn_reset weui-btn_icon weui-btn_input-clear">x</button>
			    </view>
				<view class="weui-cell__ft">
					 <button @click="getVerificationCode" class="weui-cell__control weui-btn_default weui-vcode-btn"
					  v-if="timer == 0">获取验证码</button>
					  <button class="weui-cell__control weui-btn_disabled weui-btn_primary weui-vcode-btn"
					   v-else>{{seconds}}</button>
				</view>
			</view>
			
		</view>
		<view class="button-sp-area">
			<button type="primary" @click="bindPhone">绑定</button>
		</view> -->
	</view>
	
</template>

<script>
	import {userset_name,usersend_sms,userbind_mobile} from "@/api/apiinfo";
	import topuserinfo from './../../components/top_userinfo.vue';
	export default {
		components:{
			"top-userinfo":topuserinfo
		},
		data() {
		  return {
			realname:'',
			phoneNumber: '',
			resetphonenumber:'',
			timer: 0, // 计时器
			seconds: 60, // 验证码倒计时时间
			verificationCode:'',
			type:0,
			shopid:0,
			userusername:''
		  };
		},
		onLoad() {
			this.defaultData();
			this.$nextTick(() => {
			    this.$refs.topuserinfo.getuserreload()
			});
		},
		mounted() {
			
		},
	  methods: {
		defaultData(){
			this.shopid = uni.getStorageSync('shopid');
			
			this.realname = uni.getStorageSync('username');
			// this.usernickname = localStorage.getItem('nickname');
			// this.useravatar = localStorage.getItem('avatar');
			this.phoneNumber = uni.getStorageSync('mobile');
			// this.userusername = localStorage.getItem('username');
			let user_name = uni.getStorageSync('username')
			if(user_name == '' || user_name == null){
				user_name = uni.getStorageSync('nickname')
			}
			this.userusername = user_name;
		},
		editePhone(){
			
			if(this.resetphonenumber == ''){
				uni.showToast({
				  title: '请填写新的手机号码！',
				  icon: 'none',
				});
				return false
			}
			if(this.verificationCode == ''){
				uni.showToast({
				  title: '请填写验证码！',
				  icon: 'none',
				});
				return false
			}
			let datas = {
				// realname:'',
				mobile:this.resetphonenumber,
				code:this.verificationCode
			}
			console.log(JSON.stringify(datas))
			userbind_mobile(datas).then((res) => {
				console.log("userbind_mobile接口返回数据：")
				console.log(JSON.stringify(res));
				if(res.code == 1000){
					uni.setStorageSync('mobile',this.resetphonenumber);
					this.phoneNumber = uni.getStorageSync('mobile');
				}
			}).catch(err => {
				console.log(JSON.stringify(err))
				if(err.errMsg){
					uni.showModal({
						title: '提示',
						content: '绑定手机号报错：'+err.errMsg,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								// uni.switchTab({ //内部页面跳转方式 
								// 	url: '/pages/shop/shop'
								// })
							} 
						}
					});
				}
				
			})
		},
		change(e) {
			console.log('当前模式：' + e.type + ',状态：' + e.show);
			setTimeout(() => {
				var str = document.getElementsByClassName("uni-popup__wrapper");
				Array.prototype.forEach.call(str, function(headerImage){
					headerImage.style.borderRadius = "10";
				});
			}, 3000); // 假设加载时间是3秒
			
		},
		inputDialogEidtToggle(item) {
			// this.resetphonenumber = this.phoneNumber
			this.resetphonenumber = ""
			this.verificationCode = ""
			this.$refs.inputDialog.open('center')
			
		},
		editename(){
			if(this.realname == ''){
				uni.showToast({
				  title: '请填写姓名！',
				  icon: 'none',
				});
				return false
			}
			
			let datas = {
				realname:this.realname
			}
			console.log(JSON.stringify(datas))
			userset_name(datas).then((res) => {
				console.log("editename接口返回数据：")
				console.log(JSON.stringify(res));
				uni.setStorageSync('username', this.realname);
				uni.switchTab({ //底部导航跳转方式
					url: '/pages/mypage/index'
				});
			}).catch(err => {
				console.log(JSON.stringify(err))
				if(err.errMsg){
					uni.showModal({
						title: '提示',
						content: '修改姓名报错：'+err.errMsg,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								// uni.switchTab({ //内部页面跳转方式 
								// 	url: '/pages/shop/shop'
								// })
							} 
						}
					});
				}
				
			})
		},
	    // 获取验证码
	    getVerificationCode() {
			// this.isLoading = true;
			// // 模拟异步加载数据
			// setTimeout(() => {
			//   // 数据加载完毕后
			//   this.isLoading = false;
			// }, 3000); // 假设加载时间是3秒
				
	      // 在这里添加验证手机号是否合法的逻辑
			  if (!this.validatePhoneNumber(this.resetphonenumber)) {
				uni.showToast({
				  title: '手机号码不正确！',
				  icon: 'none',
				});
				return;
			  }
			  let datas = {
				  mobile:this.resetphonenumber,
				  id:this.shopid
			  }
			usersend_sms(datas).then((res) => {
				console.log("usersend_sms接口返回数据：")
				console.log(JSON.stringify(res));
				if(res.code == 1000){
					uni.showToast({
					  title: '验证码已发送',
					  icon: 'success',
					});
					// 启动倒计时
					this.startCountdown();
				}
			}).catch(err => {
				console.log(JSON.stringify(err))
				if(err.errMsg){
					uni.showModal({
						title: '提示',
						content: '获取验证码报错：'+err.errMsg,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								// uni.switchTab({ //内部页面跳转方式 
								// 	url: '/pages/shop/shop'
								// })
							} 
						}
					});
				}
				
			})
	    },
	   
	    // 验证手机号是否合法
	    validatePhoneNumber(phoneNumber) {
	      // 简单的手机号校验，实际应用中需要更复杂的正则表达式
	      return /^1[3-9]\d{9}$/.test(phoneNumber);
	    },
	    // 倒计时函数
	    startCountdown() {
	      if (this.timer) return;
	      this.timer = setInterval(() => {
	        if (this.seconds < 1) {
	          clearInterval(this.timer);
	          this.timer = 0;
	          this.seconds = 60;
	        } else {
	          this.seconds--;
	        }
	      }, 1000);
	    },
	  },
	};
</script>

<style lang="scss">
	.content{
		// padding: 30rpx;
		position: relative;
		// .bg-radius{
		// 	border-radius: 30rpx;
		// 	box-sizing: border-box;
		// 	box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
		// 	color: #101010;
		// 	background-color: #fff;
		// }
		.fixed-btn{
			position: fixed;
			bottom: 30rpx;
			right: 30rpx;
			left: 30rpx;
		}
		.mini-btn{
			position: absolute;
			top: 8rpx;
			right: 8rpx;
			z-index: 99;
		}
		.popup-content{
			padding: 30rpx;
			border-radius: 20rpx;
			width: 600rpx;
			background: #FFFFFF;
		}
	}
	.uni-popup__wrapper{
		background: #FFFFFF;
	}
	page{
		background-color: #f9f9f9;
	}
</style>